<!-- 功能：配额编辑弹窗 | 作者：menghao.yan | 邮箱：yxs2615@163.com | 时间：2023年08月23日 22:47:06 -->
<template>
  <!-- 弹出框 -->
  <a-modal v-model:open="visible" title="配额编辑" width="500px" class="y-modal" okText="创建" @ok="onSubmit" @cancel="onCancel">
    <a-form :label-col="{ span: 6 }" :wrapper-col="{span: 14}">
      <a-form-item label="目录名" v-bind="validateInfos.name">
        <a-select v-model:value="modelRef.name" placeholder="请选择目录名">
          <a-select-option value="root">root</a-select-option>
          <a-select-option value="opt">opt</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="用户名" v-bind="validateInfos.userName">
        <a-select v-model:value="modelRef.userName" placeholder="请选择用户名">
          <a-select-option value="root">root</a-select-option>
          <a-select-option value="opt">opt</a-select-option>
        </a-select>
      </a-form-item>
      <a-divider orientation="left">空间信息</a-divider>
      <a-form-item label="已用空间">
        10 GiB
      </a-form-item>
      <a-form-item label="空间限制" v-bind="validateInfos.kongJianXianZhi">
        <a-radio-group v-model:value="modelRef.kongJianXianZhi">
          <a-radio :style="radioStyle" value="wuXian">无限</a-radio>
          <a-radio :style="radioStyle" value="ziDingYi">自定义</a-radio>
          <a-space v-if="modelRef.kongJianXianZhi === 'ziDingYi'">
            <a-input v-model:value="modelRef.kongJianXianZhiDingYi" placeholder="请输入空间限制自定义" />
            <a-select v-model:value="modelRef.kongJianXianZhiDanWei" placeholder="请选择空间限制单位">
              <a-select-option value="MiB">MiB</a-select-option>
              <a-select-option value="KiB">KiB</a-select-option>
              <a-select-option value="PiB">PiB</a-select-option>
              <a-select-option value="GiB">GiB</a-select-option>
              <a-select-option value="TiB">TiB</a-select-option>
            </a-select>
          </a-space>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="空间信息" v-bind="validateInfos.kongJianXinXi">
        <a-input v-model:value="modelRef.kongJianXinXi" placeholder="请输入空间信息" />
      </a-form-item>
      <a-divider orientation="left">文件信息</a-divider>
      <a-form-item label="已用文件">
        xxx
      </a-form-item>
      <a-form-item label="文件数限制" v-bind="validateInfos.wenJianShuXianZhi">
        <a-radio-group v-model:value="modelRef.wenJianShuXianZhi">
          <a-radio :style="radioStyle" value="wuXian">无限</a-radio>
          <a-radio :style="radioStyle" value="ziDingYi">自定义</a-radio>
          <a-space v-if="modelRef.wenJianShuXianZhi === 'ziDingYi'">
            <a-input v-model:value="modelRef.wenJianShuXianZhiZiDingYi" placeholder="请输入文件数限制自定义" />
          </a-space>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="文件信息" v-bind="validateInfos.wenJianinXi">
        <a-input v-model:value="modelRef.wenJianinXi" placeholder="请输入文件信息" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
const radioStyle = reactive({
  display: 'flex',
  height: '30px',
  lineHeight: '30px'
})

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

const { visible } = toRefs(props)

// 定义组件的事件
const emits = defineEmits(['update:visible'])

import { Form } from 'ant-design-vue'

const useForm = Form.useForm

const modelRef = reactive({
  name: 'root',
  userName: 'root',
  kongJianXianZhi: 'wuXian',
  kongJianXianZhiDanWei: 'GiB',
  kongJianXinXi: '',
  kongJianXianZhiDingYi: '',
  wenJianShuXianZhi: 'wuXian',
  wenJianShuXianZhiZiDingYi: '',
  wenJianinXi: ''
})

const rulesRef = reactive({
  name: [{ required: true, message: '请选择目录名' }],
  userName: [{ required: true, message: '请选择用户名' }],
  kongJianXianZhi: [{ required: true, message: '请选择空间限制' }],
  kongJianXinXi: [{ required: true, message: '请输入空间信息' }],
  wenJianShuXianZhi: [{ required: true, message: '请选择文件数限制' }],
  wenJianinXi: [{ required: true, message: '请输入文件信息' }]
})

const { resetFields, validate, validateInfos, mergeValidateInfo } = useForm(modelRef, rulesRef)
const onSubmit = () => {
  validate()
    .then(() => {
      console.log('编辑用户配额>>', toRaw(modelRef))
      onCancel()
    })
    .catch(err => {
      console.log('error', err)
    })
}

const onCancel = () => {
  // 触发自定义事件来通知父组件关闭弹窗
  emits('update:visible', false)
}
</script>

<style scoped>
.ant-row {
  margin-bottom: 10px;
}
.y-xinJianYongHu-title {
  color: #333;
  font-weight: bold;
  font-size: 16px;
}
</style>